<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    width="40%"
    @close="handleClose"
  >
    <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
      <el-form-item label="选择投诉人" prop="username" v-if="dialogTitle === '投诉'">
        <el-select v-model="form.username" clearable placeholder="请选择" @click="query6">
          <el-option
            v-for="item in optionss"
            :key="item.id"
            :label="item.username"
            :value="item.id"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投诉回复" prop="reply" v-if="dialogTitle === '投诉'">
        <el-input type="textarea" v-model="form.reply"/>
      </el-form-item>
      <el-form-item label="修改回复" prop="reply" v-if="dialogTitle === '编辑'">
        <el-input type="textarea" v-model="form.reply"/>
      </el-form-item>
      <el-form-item label="投诉公司" prop="storeId" v-if="dialogTitle === '添加'">
        <!--        <el-select v-model="form.storeId">-->
        <el-select v-model="form.companyName" clearable placeholder="请选择" @click="query5">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.companyName"
            :value="item.id"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投诉内容" prop="content" v-if="dialogTitle === '添加'">
        <el-input type="textarea" v-model="form.content"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineEmits, ref, defineProps, watch, onMounted } from 'vue'
import { save, modify } from '../../../api/complaint'
import { ElMessage } from 'element-plus'
import { listAll } from '../../../api/company'
// import {  } from '../../../api/user'
const form = ref({
  username: '',
  storeId: '',
  companyName: '',
  content: '',
  reply: '',
  id: ''
})
// 投诉公司
const options = ref([])
async function query5() {
  const row = await listAll()
  queryForm4.value = row.data.data
  options.value = queryForm4.value
}
const queryForm4 = ref({
  id: '',
  companyName: ''
})

// 投诉人
const optionss = ref([])
async function query6() {
  const row = await listAll()
  queryForm5.value = row.data.data
  optionss.value = queryForm5.value
}
const queryForm5 = ref({
  id: '',
  username: ''
})
const props = defineProps({
  // 新增汽车品牌标题
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  // 编辑行数据
  dialogRowValue: {
    type: Object,
    default: () => {
    }
  }
})
// 监听props.dialogRowValue值改变
watch(
  () => props.dialogRowValue,
  () => {
    // console.log(props.dialogRowValue)
    form.value = props.dialogRowValue
  },
  {
    deep: true,
    immediate: true
  }
)

const isDisabled = ref(false)
onMounted(() => {
  if (props.dialogTitle === '编辑') {
    isDisabled.value = true
  }
})

// 表单校验
const rules = ref({
  content: [
    {
      required: true,
      message: '投诉内容不能为空'
    }
  ],
  reply: [
    {
      required: true,
      message: '投诉回复内容不能为空'
    }
  ]
})

const emits = defineEmits(['update:modelValue', 'query'])

// 关闭
function handleClose() {
  emits('update:modelValue', false)
}

// 确认
const formRef = ref(null)

function handleConfirm() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      props.dialogTitle === '添加' ? await save(form.value) : props.dialogTitle === '投诉' ? await modify(form.value) : await modify(form.value)
      ElMessage({
        message: '更新成功',
        type: 'success'
      })
      // 上层组件重新获取数据
      emits('query')
      handleClose()
    } else {
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__prefix-inner {
  align-items: center;
}
</style>
